<template>
	<ls-skeleton :loading="loading">
		<view class="container">
			<view :style="{'height': statusBarHeight,'background-color': '#06A972'}"></view>
			<view class="head">
				<view class="user-card">
					<view class="user-info" @click="setting">
						<view class="avatar-box">
							<image class="avatar"
								:src="userInfo.headImgUrl || '../../static/images/default_avatar.png'">
							</image>
						</view>
						<view class="info">
							<view class="store-name" style="font-size: 36rpx; font-weight: bold;">
								{{userInfo.userName || ''}}
								({{ userType === 'SALE' ? '批发商' : userType === 'STORE' ? '门店' : '车主' }})
							</view>
							<view class="name">{{userInfo.storeName || ''}}</view>
							<view class="name" v-if="userInfo.expiryDate">我的会员:{{formatDate(userInfo.expiryDate) || ''}}
							</view>
						</view>
						<view style="margin-top: 60rpx;" class="message">
							<view class="iconfont icon-shezhi"></view>
						</view>
					</view>
					<view class="num-wrapper">
						<!-- <view v-if="userType != 'SALE'" class="num-item">
							<u--input placeholder="请输入邀请码" border="surround" v-model="inviteCode" type="number"
								class="input-item"></u--input>
							<button class="btn-item" @click="saveInvite">
								提交
							</button>
						</view> -->
						<!-- 	<view class="num-item" @click="goMenuPage('/pages/users/user_money/index')">
							<text class="nums"><text style="font-size: 24rpx;">￥</text>{{userAmount.totalPrice}}</text>
							<view class="txt">采购余额</view>
						</view>
						<view v-if="userType == 'SALE'" class="num-item"
							@click="goMenuPage('/pages/users/user_money/index')">
							<text class="nums"><text style="font-size: 24rpx;">￥</text>{{userAmount.realPrice}}</text>
							<view class="txt">订单收入</view>
						</view>
						<view class="num-item">
							<text class="nums"><text style="font-size: 24rpx;">￥</text>{{userAmount.totalPay}}</text>
							<view class="txt">采购金额</view>
						</view> -->
					</view>
				</view>
				<!-- 模态框 -->
				<u-modal :show="show" :title="title" @confirm="saveInvite">
					<u--input placeholder="请输入邀请码" border="surround" v-model="inviteCode" type="number"></u--input>
				</u-modal>
				<view class="order-wrapper height">
					<view v-if="userType == 'SALE'" class="num-price">
						<text class="nums" style="color: black;"><text
								style="font-size: 24rpx;color: black;">￥</text>0</text>
						<view class="txt" style="color: black;">订单金额</view>
					</view>
					<view v-if="userType == 'STORE' && userInfo.isSalesman">
						<view class="order-hd flex-row">
							<view class="left">我管理的门店订单</view>
							<navigator class="right flex" hover-class="none" url="/pages/users/order_sale/order_sale">
								<text>查看全部</text>
								<text class="iconfont icon-xiangyou"></text>
							</navigator>
						</view>
						<view class="order-bd">
							<navigator class="order-item" hover-class="none" v-for="(item, index) in orderSaleListSale"
								:key="index" :url="item.url">
								<view class="pic">
									<text :class="['iconfont', item.icon]"></text>
									<text class="order-status-num" v-if="item.orderCount > 0">{{item.orderCount}}</text>
								</view>
								<view class="txt">{{item.title}}</view>
							</navigator>
						</view>
					</view>
					<view class="order-hd flex-row" v-if="userType == 'STORE'||userType == 'CAR'">
						<view class="left">订单中心</view>
						<navigator class="right flex" hover-class="none" url="/pages/users/order_list/index?type=0">
							<text>查看全部</text>
							<text class="iconfont icon-xiangyou"></text>
						</navigator>
					</view>
					<view class="order-hd flex-row" v-if="userType == 'SALE'">
						<view class="left">我管理的门店订单</view>
						<navigator class="right flex" hover-class="none" url="/pages/users/order_list/index?type=0">
							<text>查看全部</text>
							<text class="iconfont icon-xiangyou"></text>
						</navigator>
					</view>
					<view class="order-bd" v-if="userType == 'SALE'">
						<navigator class="order-item" hover-class="none" v-for="(item, index) in orderListSale"
							:key="index" :url="item.url">
							<view class="pic">
								<text :class="['iconfont', item.icon]"></text>
								<text class="order-status-num" v-if="item.orderCount > 0">{{item.orderCount}}</text>
							</view>
							<view class="txt">{{item.title}}</view>
						</navigator>
					</view>
					<view class="order-bd" v-if="userType == 'STORE'||userType == 'CAR'">
						<navigator class="order-item" hover-class="none" v-for="(item, index) in orderList" :key="index"
							:url="item.url">
							<view class="pic">
								<text :class="['iconfont', item.icon]"></text>
								<text class="order-status-num" v-if="item.orderCount > 0">{{item.orderCount}}</text>
							</view>
							<view class="txt">{{item.title}}</view>
						</navigator>
					</view>
				</view>
			</view>

			<view class="user-menus" v-if="userType == 'STORE'">
				<view class="menu-title">门店功能</view>
				<view class="list-box">
					<navigator class="item" hover-class="none" :url="item.url" v-for="(item, index) in storeMenu"
						:key="index">
						<image :src="item.img">
						</image><text>{{item.title}}</text>
					</navigator>
				</view>
			</view>
			<view class="user-menus" v-if="userType == 'STORE'">
				<view class="menu-title">赋能服务</view>
				<view class="list-box">
					<navigator class="item" hover-class="none" :url="item.url" v-for="(item, index) in serviceMenu"
						:key="index">
						<image :src="item.img"></image>
						<text>{{item.title}}</text>
					</navigator>
				</view>
			</view>
			<view class="user-menus" v-if="userType == 'SALE'">
				<view class="menu-title">车灯师授权代理商</view>
				<view class="list-box">
					<navigator class="item" hover-class="none" :url="item.url" v-for="(item, index) in agentMenu"
						:key="index">
						<image :src="item.img"></image>
						<text>{{item.title}}</text>
					</navigator>
				</view>
			</view>
			<view class="user-menus" v-if="userType == 'CAR'">
				<view class="menu-title">赋能服务</view>
				<view class="list-box">
					<navigator class="item" hover-class="none" :url="item.url" v-for="(item, index) in ownerMenu"
						:key="index">
						<image :src="item.img"></image>
						<text>{{item.title}}</text>
					</navigator>
				</view>
			</view>

			<view class="tab-box">
				<button class="tab" open-type="contact" session-from="sessionFrom">
					<image src="../../static/images/user_16.png" class="tab-icon" />
					<text class="tab-text">客服</text>
				</button>
				<button v-if="userType == 'CAR' || userInfo.initialFeePaid === 0" class="tab"
					:data-url="'/pages/users/apply_store/index'" @click="handleNavigation">
					<image src="../../static/images/user_06.png" class="tab-icon" />
					<text class="tab-text">申请会员店</text>
				</button>
			</view>
		</view>
	</ls-skeleton>
</template>


<script>
	import {
		toLogin,
		toStore
	} from '@/libs/login.js';
	import {
		getMyOrderList,
		getSaleOrderList,
		orderCount
	} from '@/api/order.js';
	import {
		saveInvite,
		getUserAmount,
		getUserInfo
	} from '@/api/user.js';
	import {
		mapState,
		mapGetters
	} from "vuex";

	let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;


	export default {
		data() {
			return {
				show: false,
				inviteCode: '',
				title: '邀请码（ 注：绑定成功后会重新登陆更新信息 ）',
				ownerMenu: [{
						img: '../../static/images/user_01.png',
						url: '/pages/users/store_warranty/index',
						title: '生成保单',
					},
					{
						img: '../../static/images/user_02.png',
						url: '/pages/users/warranty_record/new_index',
						title: '电子保单',
					},
					{
						img: '../../static/images/user_10.png',
						url: '/pages/users/user_active/index',
						title: '激活电子质保',
					}, {
						img: '../../static/images/user_02.png',
						url: '/pages/users/warranty_record/index',
						title: '电子保单记录',
					},
				],
				agentMenu: [{
						img: '../../static/images/user_13.png',
						url: '/pages/agent/purchase/index',
						title: '工厂采购',
					},
					{
						img: '../../static/images/user_14.png',
						url: '/pages/agent/customer/index',
						title: '我的门店',
					},
					{
						img: '../../static/images/user_15.png',
						url: '/pages/agent/local_store/index',
						title: '新增门店',
					},
					{
						img: '../../static/images/user_17.png',
						url: '/pages/agent/order_list/index',
						title: '采购单',
					},
					{
						img: '../../static/images/user_15.png',
						url: '/pages/printer/printer_list/index',
						title: '绑定打印机',
					},
					{
						img: '../../static/images/yewuyuan.png',
						url: '/pages/agent/salesman/salesman',
						title: '我的业务员',
					}

				],
				storeMenu: [{
						img: '../../static/images/user_01.png',
						url: '/pages/users/store_warranty/index',
						title: '生成保单',
					},
					{
						img: '../../static/images/user_02.png',
						url: '/pages/users/warranty_record/index',
						title: '保单记录',
					},
					// {
					// 	img: '../../static/images/user_03.png',
					// 	url: '/pages/users/order_list/index',
					// 	title: '采购订单',
					// },
					{
						img: '../../static/images/user_03.png',
						url: '/pages/users/product_query/index',
						title: '扫码查询',
					},
					{
						img: '../../static/images/user_04.png',
						url: '/pages/users/aftermarket/index',
						title: '售后服务',
					},
					{
						img: '../../static/images/user_04.png',
						url: '/pages/users/aftermarket_list/index',
						title: '售后列表',
					},
					{
						img: '../../static/images/user_02.png',
						url: '/pages/users/warranty_record/new_index',
						title: '电子保单',
					},

					{
						img: '../../static/images/user_03.png',
						url: '/pages/scanCode/scan_code_out/index',
						title: '扫码出库',
					},
					{
						img: '../../static/images/user_03.png',
						url: '/pages/scanCode/scan_code_out_list/index',
						title: '出库记录',
					},
				],
				serviceMenu: [{
						img: '../../static/images/user_05.png',
						url: '/pages/users/user_records/index',
						title: '访问记录',
						icon: '',
					},
					{
						img: '../../static/images/user_06.png',
						url: '/pages/users/user_search/index',
						title: '主页查询',
						icon: '',
					},
					{
						img: '../../static/images/user_07.png',
						url: '/pages/users/user_dynamics/index',
						title: '我的动态',
						icon: '',
					},
					{
						img: '../../static/images/user_08.png',
						url: '/pages/users/user_collect/index',
						title: '我的收藏',
						icon: '',
					},
					{
						img: '../../static/images/user_08.png',
						url: '/pages/users/user_money/index',
						title: '钱包',
						icon: '',
					},
					{
						img: '../../static/images/huiyuan.png',
						url: '/pages/users/user_member/index',
						title: '我的会员',
						icon: '',
					},
				],
				orderList: [{
						icon: 'icon-daifukuan',
						// url: '/pages/users/order_list/index?type=IN_PAY',
						url: '/pages/users/order_list/index?type=WAIT_PAY',
						title: '待付款',
						status: "WAIT_PAY",
						// status: "IN_PAY",
						orderCount: 0
					},
					{
						icon: 'icon-daifahuo',
						url: '/pages/users/order_list/index?type=WAIT_SEND',
						title: '待发货',
						status: "WAIT_SEND",
						orderCount: 0
					},
					{
						icon: 'icon-daishouhuo',
						url: '/pages/users/order_list/index?type=WAIT_RECEIVE',
						title: '待收货',
						status: "WAIT_RECEIVE",
						orderCount: 0
					},
					{
						icon: 'icon-daipingjia',
						url: '/pages/users/order_list/index?type=FINISH',
						status: "FINISH",
						title: '订单完成',
						orderCount: 0
					}
				],
				orderSaleListSale: [{
						icon: 'icon-daifukuan',
						// url: '/pages/users/order_list/index?type=IN_PAY',
						url: '/pages/users/order_sale/order_sale?type=WAIT_PAY',
						title: '待付款',
						// status: "IN_PAY",
						status: "WAIT_PAY",
						orderCount: 0
					},
					{
						icon: 'icon-daifahuo',
						url: '/pages/users/order_sale/order_sale?type=WAIT_SEND',
						title: '待发货',
						status: "WAIT_SEND",
						orderCount: 0
					},
					{
						icon: 'icon-daipingjia',
						url: '/pages/users/order_sale/order_sale?type=FINISH',
						title: '订单完成',
						status: "FINISH",
						orderCount: 0
					}
				],
				orderListSale: [{
						icon: 'icon-daifukuan',
						// url: '/pages/users/order_list/index?type=IN_PAY',
						url: '/pages/users/order_list/index?type=WAIT_PAY',
						title: '待付款',
						// status: "IN_PAY",
						status: "WAIT_PAY",
						orderCount: 0
					},
					{
						icon: 'icon-daifahuo',
						url: '/pages/users/order_list/index?type=WAIT_SEND',
						title: '待发货',
						status: "WAIT_SEND",
						orderCount: 0
					},
					{
						icon: 'icon-daipingjia',
						url: '/pages/users/order_list/index?type=FINISH',
						title: '订单完成',
						status: "FINISH",
						orderCount: 0
					}
				],
				statusBarHeight: statusBarHeight + 'px',
				userInfo: {},
				loading: true,
				userAmount: {},
			}

		},

		computed: {
			...mapGetters({
				isLogin: 'isLogin',
				uid: 'uid',
				isStore: 'isStore',
				userType: 'userType'
			})
		},


		onLoad() {
			let that = this;
		},

		onShow() {
			if (this.isLogin) {
				let that = this;
				console.log('有无绑定店铺：' + that.isStore)
				if (that.isLogin == false) {
					toLogin();
				}
				// else if ((that.isStore == null || that.isStore == false) && that.userType != 'CAR') {
				// 	toStore();
				// }
				that.getUserInfo();
				// 获取订单数
				// that.getOrderNum();
				that.orderCount();
				// 获取充值余额
				that.getUserAmount();
			} else {
				toLogin();
			}
		},

		methods: {
			formatDate(date) {
				if (!date) return "";
				const expiryDate = new Date(date);
				const currentDate = new Date(); // 获取当前时间

				// 将日期转换为 UTC+8
				expiryDate.setHours(expiryDate.getHours() + 8);
				currentDate.setHours(currentDate.getHours() + 8);

				if (expiryDate < currentDate) {
					return expiryDate.toISOString().split('T')[0] + " 已过期";
				} else {
					return expiryDate.toISOString().split('T')[0] + " 到期";
				}
			},
			handleNavigation(event) {
				const url = event.currentTarget.dataset.url; // 获取 data-url 属性值
				uni.navigateTo({
					url: url, // 跳转到对应页面
				});
			},
			/**
			 * 绑定上游供应商
			 */
			saveInvite() {
				let that = this;
				if (!that.inviteCode) {
					that.show = false;
					return that.$util.Tips({
						title: '请输入上游手机号'
					});
				}
				saveInvite({
					userInfoId: that.uid,
					inviteCode: that.inviteCode
				}).then(res => {
					that.$util.Tips({
						title: '绑定成功'
					});
					that.$store.commit("LOGOUT");
					that.show = false;
					// that.getUpSupplier();
				}).catch(err => {
					that.show = false;
					that.$util.Tips({
						title: err
					});
				})
			},
			handleButtonClick() {
				this.show = true;
			},
			closeModal() {
				this.show = false;
			},
			/**
			 * 订单统计
			 */
			orderCount() {
				let that = this;
				orderCount({
					userInfoId: that.uid,
				}).then(res => {
					if (that.userType == 'SALE') {
						that.orderListSale.forEach((e) => {
							res.value.forEach((el) => {
								if (e.status == el.orderStatus) {
									e.orderCount = el.orderCount;
									return;
								}
							});
						})
					} else {
						that.orderList.forEach((e) => {
							res.value.forEach((el) => {
								if (e.status == el.orderStatus) {
									e.orderCount = el.orderCount;
									return;
								}
							});
						})
					}

				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			},
			/**
			 * 获取订单数
			 */
			// getOrderNum() {
			// 	let that = this;
			// 	if (that.userType == 'SALE') {
			// 		getSaleOrderList({
			// 			userInfoId: that.uid,
			// 			orderStatus: 'WAIT_SEND'
			// 		}).then(res => {
			// 			console.log(1);
			// 			that.orderListSale[1].num = res.value.list.length || 0;
			// 		}).catch(err => {

			// 		})
			// 	} else if (that.userType == 'STORE') {
			// 		getSaleOrderList({
			// 			userInfoId: that.uid,
			// 			orderStatus: 'WAIT_RECEIVE'
			// 		}).then(res => {
			// 			that.orderList[2].num = res.value.length;
			// 		}).catch(err => {

			// 		})
			// 	}
			// },

			/**
			 * 设置用户信息
			 */
			setting() {
				let that = this;
				that.$util.Tips('/pages/users/user_setting/index');
			},

			/**
			 * 获取用户信息
			 */
			getUserInfo() {
				let that = this;
				getUserInfo({
					userInfoId: that.uid,
				}).then(res => {
					that.userInfo = res.value;
					if (that.userInfo.userType === "STORE" && that.userInfo.initialFeePaid > 0) {
						// 新的菜单项
						const newItem = {
							img: '../../static/images/huiyuan.png',
							url: '/pages/users/user_member/index',
							title: '我的会员',
							icon: ''
						};

						// 检查是否已经存在
						const exists = that.ownerMenu.some(item =>
							item.url === newItem.url || item.title === newItem.title
						);

						// 如果不存在，就添加
						if (!exists) {
							that.ownerMenu.push(newItem);
						}
					}
					that.$store.commit("UPDATE_USERINFO", res.value);
					that.loading = false;
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			},

			/**
			 * 获取余额
			 */
			getUserAmount() {
				let that = this;
				getUserAmount({
					userInfoId: that.uid,
				}).then(res => {
					this.userAmount = res.value
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			},

			/**
			 * 跳转
			 */
			goMenuPage(url) {
				let that = this;
				that.$util.Tips(url);
			}
		}
	}
</script>

<style>
	.btn {
		display: inline-block;
		width: 150rpx;
		padding: 10rpx;
		border-radius: 12rpx;
		background-color: #e7ffff;
		/* 按钮背景色 */
		color: black;
		font-size: 28rpx;
		text-align: center;
		line-height: 40rpx;
		box-shadow: 0rpx 4rpx 10rpx rgba(0, 0, 0, 0.1);
		/* 添加阴影效果 */
		transition: all 0.3s ease;
	}

	.btn:active {
		background-color: #dcf8ff;
		/* 点击效果颜色 */
		transform: scale(0.95);
		/* 点击缩小效果 */
	}

	/* page {
		background: url(/static/image/userbg.png) top center no-repeat #f5f9fc;
		background-size: 100% auto;
	} */

	page {
		background-color: #f5f5f5;
	}

	.container {
		position: relative;
		padding-bottom: 30rpx;
		/* padding: 30rpx; */
	}

	.head .user-card {
		position: relative;
		width: 100%;
		height: 380rpx;
		margin: 0 auto;
		padding: 34rpx 28rpx;
		background-image: url(/static/images/user_bg.png);
		background-size: 100% auto;
		/* background-color: #3CBB45; */
		background-color: #06A972;
	}

	.head .user-card .user-info {
		z-index: 20;
		position: relative;
		display: flex;
	}

	.head .user-info .avatar-box {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.head .user-card .user-info .avatar {
		position: relative;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.head .user-card .user-info .avatar image {
		width: 100%;
		height: 100%;
	}

	.head .user-card .user-info .info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 20rpx;
		padding: 14rpx 0;
		color: #fff;
	}

	.head .user-card .message {
		align-self: flex-start;
		position: relative;
		margin-top: 14rpx;
		margin-right: 20rpx;
	}

	.head .order-wrapper {
		background: #fff;
		margin: 0 30rpx;
		border-radius: 16rpx;
		position: relative;
		margin-top: -10rpx;
	}

	.height {
		margin-top: -150rpx !important;
	}

	.head .order-wrapper .order-hd {
		justify-content: space-between;
		padding: 30rpx 20rpx 10rpx 30rpx;
		margin-top: 24rpx;
		font-size: 30rpx;
		color: #282828;
	}

	.head .order-wrapper .order-bd {
		display: flex;
		padding: 0 0;
	}

	.head .order-wrapper .order-hd .left {
		font-weight: 700;
	}

	.head .order-wrapper .order-hd .right {
		display: flex;
		align-items: center;
		color: #666;
		font-size: 26rpx;
	}

	.head .order-wrapper .order-hd .right .icon-xiangyou {
		margin-left: 4rpx;
		font-size: 26rpx;
	}

	.head .order-wrapper .order-bd .order-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 33.3%;
		height: 140rpx;
		padding-bottom: 10rpx;
	}

	.head .order-wrapper .order-bd .order-item .pic {
		position: relative;
		text-align: center;
	}

	.head .order-wrapper .order-bd .order-item .pic .iconfont {
		font-size: 48rpx;
		/* color: #3CBB45; */
		color: #06A972;
	}

	.head .order-wrapper .order-bd .order-item .pic .order-status-num {
		min-width: 12rpx;
		background-color: #fff;
		/* color: #3CBB45; */
		color: #06A972;
		border-radius: 30rpx;
		position: absolute;
		right: -14rpx;
		top: -14rpx;
		font-size: 20rpx;
		padding: 0 8rpx;
		border: 1rpx solid #3CBB45;
	}

	.head .order-wrapper .order-bd .order-item .txt {
		margin-top: 6rpx;
		font-size: 24rpx;
		color: #333;
	}

	.user-menus {
		background-color: #fff;
		margin: 20rpx 30rpx 0;
		border-radius: 16rpx;
	}

	.user-menus .menu-title {
		padding: 30rpx 30rpx 40rpx;
		font-size: 30rpx;
		color: #282828;
		font-weight: 700;
	}

	.user-menus .list-box {
		display: flex;
		flex-wrap: wrap;
		padding: 0;
	}

	.user-menus .item image {
		width: 52rpx;
		height: 52rpx;
		margin-bottom: 18rpx;
	}

	.user-menus .item {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		width: 25%;
		margin-bottom: 23px;
		font-size: 12px;
		color: #333;
	}

	.num-wrapper {
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		height: 40%;
		/* 根据需要设置容器高度 */
	}

	.num-item {
		display: flex;
		align-items: center;
		/* 输入框和按钮垂直对齐 */
		width: 100%;
		/* 占据可用宽度 */
		padding: 10rpx;
	}

	.input-item {
		flex: 1;
		/* 输入框占满剩余宽度 */
		margin-right: 0;
		/* 去掉右边间距，保证紧密贴合按钮 */
		font-size: 25rpx;
		height: 70rpx;
		/* 输入框高度 */
		box-sizing: border-box;
		border: 1px solid #ddd;
		/* 输入框边框 */
		border-right: none;
		/* 去掉右边框，与按钮紧密贴合 */
	}

	.btn-item {
		font-size: 25rpx;
		height: 70rpx;
		/* 按钮高度与输入框一致 */
		padding: 0 20rpx;
		/* 按钮左右间距，使宽度自适应内容 */
		box-sizing: border-box;
		/* 按钮边框 */
		border-left: none;
		/* 去掉左边框，与输入框紧密贴合 */
		background-color: #06A972;
		/* 按钮背景色 */
		text-align: center;
		line-height: 70rpx;
		/* 设置文字居中，匹配按钮高度 */
		white-space: nowrap;
		/* 防止按钮内容换行 */
	}

	.num-price {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nums {
		font-size: 60rpx;
		/* 钱部分字体更大 */
		font-weight: bold;
		/* 显眼加粗 */
		color: #ddd;
		/* 显眼的深色 */
	}

	.nums text {
		font-size: 24rpx;
		/* 元符号字体大小保持适中 */
		font-weight: normal;
		/* 元符号不加粗 */
	}

	.txt {
		font-size: 26rpx;
		/* 字体稍小 */
		color: #e7eae9;
		/* 灰色 */
		margin-top: 5rpx;
		/* 增加与金额的间距 */
	}


	/* 	.head .user-card .num-wrapper {
		z-index: 30;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 22rpx;
		color: #fff;
	} */

	/* 	.head .user-card .num-wrapper .num-item {
		width: 33.33%;
		width: 50%;
		text-align: center;
	} */

	/* 	.head .user-card .num-wrapper .num-item .nums {
		font-size: 42rpx;
		font-weight: 700;
	}

	.head .user-card .num-wrapper .num-item~.num-item {
		position: relative;
	}

	.head .user-card .num-wrapper .num-item~.num-item:before {
		content: "";
		position: absolute;
		width: 1rpx;
		height: 28rpx;
		top: 50%;
		margin-top: -14rpx;
		background-color: hsla(0, 0%, 100%, .4);
		left: 0;
	}

	.head .user-card .num-wrapper .num-item .txt {
		margin-top: 8rpx;
		font-size: 26rpx;
		color: hsla(0, 0%, 100%, .6);
	} */
	//功能
	.tab-box {
		display: flex;
		justify-content: space-around;
	}

	.tab {
		margin-top: 20rpx;
		width: 200rpx;
		display: flex;
		flex-direction: column;
		/* 垂直排列 */
		align-items: center;
		/* 居中对齐 */
		justify-content: center;
		/* 居中内容 */
		background: none;
		border-radius: 80rpx;
		/* 增加圆角幅度 */
	}

	.tab-icon {
		width: 60rpx;
		height: 60rpx;
	}

	.tab-text {
		font-size: 24rpx;
		color: #333;
		/* 设置字体颜色 */
	}
</style>